<template>
    <el-dialog
        :title="`分组管理(${activeUnit.name})`"
        fullscreen
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        append-to-body
        @close="closeAction"
        :visible="visible"
    >
        <el-container :style="{ height: mainH + 'px' }">
            <el-aside class="area-blk" width="300px">
                <h2 class="hd flex v-c">
                    <div class="flex-1">分组列表</div>
                    <el-button
                        type="green"
                        size="mini"
                        @click="newGroup"
                        :disabled="!$store.getters.hasEditPermission"
                        >+添加分组</el-button
                    >
                </h2>
                <ul class="group-list">
                    <li
                        class="group-item flex v-c"
                        :class="{ active: activeGroup.id == item.id }"
                        v-for="(item, index) in groupList"
                        :key="index"
                        @click="selectGroup(item)"
                    >
                        <div class="flex-1">{{ item.name }}</div>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="editGroup(item)"
                            :disabled="!$store.getters.hasEditPermission"
                            >编辑</el-button
                        >
                        <el-button
                            type="danger"
                            size="mini"
                            @click="deleteGroup(item)"
                            :disabled="!$store.getters.hasEditPermission"
                            >删除</el-button
                        >
                    </li>
                </ul>
                <div class="data-none" v-if="groupList.length == 0">暂无分组请添加</div>
                <!-- 分组列表 -->
                <!--  -->
            </el-aside>
            <el-main class="census-main">
                <div class="opers flex v-c">
                    <el-form :inline="true" class="filter-blk flex-1">
                        <el-form-item class="ml-20" label="设备名称">
                            <el-input
                                placeholder="请输入设备名称"
                                v-model.trim="filterForm.name"
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="ml-20" label="设备号">
                            <el-input
                                placeholder="请输入设备号"
                                v-model.trim="filterForm.number"
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="ml-20" label="状态">
                            <el-select
                                v-model="filterForm.fireRating"
                                placeholder="请选择"
                                clearable
                            >
                                <el-option
                                    :label="item.name"
                                    :value="item.id"
                                    v-for="(item, key) in stateList"
                                    :key="key"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="searchAction">
                                <i class="iconfont icon-search"></i>
                                搜索
                            </el-button>
                            <el-button type="primary" @click="resetAction"
                                ><i class="iconfont icon-refresh"></i>
                                重置
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <div>
                        <el-button type="blue" @click="newAction" v-if="activeGroup">
                            <i class="iconfont icon-add"></i>
                            添加
                        </el-button>
                    </div>
                </div>
                <el-table :data="dataList" style="width: 100%" v-loading="loading">
                    <el-table-column prop="name" label="设备名称"></el-table-column>
                    <el-table-column prop="number" label="设备编号"></el-table-column>
                    <el-table-column prop="transDeviceCode" label="传输装置编码"></el-table-column>
                    <el-table-column prop="installtime" label="安装时间"></el-table-column>
                    <el-table-column prop="position" label="安装位置"></el-table-column>
                    <el-table-column prop="currentstate" label="当前状态">
                        <template slot-scope="scope">
                            {{ stateList[scope.row.currentstate - 1].name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="340">
                        <template slot-scope="scope">
                            <div class="nowrap">
                                <el-button
                                    type="primary"
                                    @click="editAction(scope.row)"
                                    v-if="hasPermission('017009')"
                                >
                                    编辑
                                </el-button>
                                <el-button
                                    type="danger"
                                    @click="deleteAction(scope.row)"
                                    v-if="hasPermission('017009')"
                                >
                                    删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="total > 0"
                    class="text-right mt-20 mr-20"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, total, jumper"
                    :total="total"
                >
                </el-pagination>
            </el-main>
        </el-container>
        <el-dialog
            :title="newGroupModalTitle"
            width="350px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
            :visible.sync="newGroupModalVisible"
            v-if="newGroupModalVisible"
        >
            <el-form ref="groupForm" :model="groupForm" :label-width="120 + 'px'">
                <el-form-item
                    label="分组名称："
                    prop="name"
                    :rules="[{ required: true, message: '请输入分组名称', trigger: 'change' }]"
                >
                    <el-input placeholder="请输入" v-model.trim="groupForm.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="cancel" @click="newGroupModalVisible = false">取消</el-button>
                <el-button type="primary" :loading="adding" @click="submitGroupAction"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <UltrasonicNew
            v-if="newModalVisible"
            :visible.sync="newModalVisible"
            :unit="activeUnit"
            :group="activeGroup"
            :deviceClassify="deviceClassify"
            :activeData="activeData"
            @success="getData()"
        ></UltrasonicNew>
    </el-dialog>
</template>
<script>
import { mapState } from "vuex"
import utils from "@/assets/js/utils"
import UltrasonicNew from "@/components/equipment/UltrasonicNew.vue"
export default {
    name: "Group",
    components: {
        UltrasonicNew,
    },
    props: {
        winH: {
            type: Number,
            default: 500,
        },
        visible: {
            type: Boolean,
        },
        activeUnit: {
            type: Object,
            required: true,
        },
        deviceClassify: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            dateRange: "",
            filterForm: {
                number: "",
                name: "",
                currentstate: "",
            },
            total: 0,
            currentPage: 1,
            pageSize: 10,
            loading: false,
            dataList: [],
            newModalVisible: false,
            newModalTitle: "",
            activeData: null,

            groupList: [],
            activeGroup: null,
            newGroupModalVisible: false,
            newGroupModalTitle: "",
            groupForm: {},
            adding: false,
            deleting: false,
            stateList: [
                {
                    id: 1,
                    name: "正常",
                },
                {
                    id: 2,
                    name: "报警",
                },
                {
                    id: 3,
                    name: "离线",
                },
                {
                    id: 4,
                    name: "故障",
                },
            ],
        }
    },
    computed: {
        ...mapState(["siteInfos"]),
        mainH() {
            return this.winH - 110
        },
    },
    created() {
        this.getGroup()
    },
    methods: {
        closeAction() {
            this.$emit("update:visible", false)
        },
        getGroup() {
            this.groupLoading = true
            this.$get("/fireFightingIOT/ultrasonic/groupList", {
                businessId: this.activeUnit.id,
            }).then(
                (res) => {
                    this.groupLoading = false
                    this.groupList = res.data
                    if (this.groupList.length > 0 && !this.activeGroup) {
                        this.activeGroup = this.groupList[0]
                        this.getData()
                    } else if (this.groupList.length == 0) {
                        this.dataList = []
                    }
                },
                (error) => {
                    this.$message.error(error.msg)
                    this.groupLoading = false
                }
            )
        },
        selectGroup(item) {
            this.activeGroup = item
            this.getData(1)
        },
        newGroup() {
            this.newGroupModalVisible = true
            this.newGroupModalTitle = "新增分组"
            this.groupForm = {}
        },
        editGroup(item) {
            this.newGroupModalVisible = true
            this.newGroupModalTitle = "编辑分组"
            this.groupForm = item
        },
        deleteGroup(item) {
            this.showConfirm("确定删除该分组吗？", () => {
                this.deleting = true
                this.$post("/fireFightingIOT/ultrasonic/groupDel", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        if (this.activeGroup.id == item.id) {
                            this.activeGroup = null
                        }
                        this.getGroup()
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
        submitGroupAction() {
            this.$refs["groupForm"].validate((valid) => {
                if (valid) {
                    this.adding = true
                    if (!this.groupForm.businessId) {
                        this.groupForm.businessId = this.activeUnit.id
                    }
                    let url = "/fireFightingIOT/ultrasonic/groupAddOrUpdate"
                    this.$ajax({
                        url: url,
                        method: "post",
                        data: this.groupForm,
                    }).then(
                        (data) => {
                            this.adding = false
                            this.$message.success("保存成功")
                            this.getGroup()
                            this.newGroupModalVisible = false
                        },
                        (error) => {
                            this.adding = false
                            this.$message.error(error.msg)
                        }
                    )
                }
            })
        },
        getData(page = 1) {
            const params = Object.assign(
                {
                    page,
                    limit: 10,
                    businessId: this.activeUnit.id,
                    groupId: this.activeGroup.id,
                },
                this.filterForm
            )
            this.loading = true
            this.$get("/fireFightingIOT/ultrasonic/ultrasonicDeviceListPage", params).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.currentPage = page
                    this.total = data.totalSize
                    this.dataList = data.Items
                },
                (error) => {
                    this.$message.error(error.msg)
                    this.loading = false
                }
            )
        },
        handleCurrentChange(page) {
            this.getData(page)
        },
        searchAction() {
            this.getData(1)
        },
        resetAction() {
            this.filterForm = {}
        },
        getDataById(id) {
            return this.$get("/fireFightingIOT/ultrasonic/ultrasonicDeviceDetail", { id })
        },
        newAction() {
            this.newModalTitle = "新增设备"
            this.newModalVisible = true
            this.activeData = null
        },
        editAction(item) {
            this.newModalTitle = "编辑设备"
            this.getDataById(item.id).then((res) => {
                this.newModalVisible = true
                this.activeData = res.data
            })
        },
        deleteAction(item) {
            this.showConfirm("确定删除该设备吗？", () => {
                this.deleting = true
                this.$post("/fireFightingIOT/ultrasonic/ultrasonicDeviceDel", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
    },
}
</script>
<style lang="less" scoped></style>
